<template>
  <div>
    <el-dialog class="select-prod" title="选择装备" :visible.sync="selectprodVis" @close="close" width="950px" append-to-body :close-on-click-modal='false'>
        
        <el-row :gutter="16" style="line-height:40px">

          <el-col :span="1">
            <div class="label-wrap category">
              <label for="">编号：</label>
            </div>
          </el-col>
          <el-col :span="4">
            <el-input v-model="prod_code" size="small" placeholder="请输入编号" style="width:100%"></el-input>
          </el-col>

          <el-col :span="1">
            <div class="label-wrap category">
              <label for="">名称：</label>
            </div>
          </el-col>
          <el-col :span="5">
            <el-input v-model="prod_name" size="small" placeholder="请输入名称" style="width:100%"></el-input>
          </el-col>

          <el-col :span="1">
            <div class="label-wrap category">
              <label for="">库区：</label>
            </div>
          </el-col>
          <el-col :span="4">
            <el-select v-model="select_area" @change="choseArea" placeholder="请选择" style="width:100%"  size="small">
              <el-option
                v-for="item in areaList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="1">
            <div class="label-wrap category">
              <label for="">库位：</label>
            </div>
          </el-col>
          <el-col :span="4">
            <el-select v-model="select_depart" placeholder="请先选择库区" style="width:100%"  size="small">
              <el-option
                v-for="item in departlist"
                :key="item.departmentId"
                :label="item.departmentCode"
                :value="item.departmentId">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-button type="primary" size="mini" style="width:100%" @click="searchProd">搜索</el-button>
          </el-col>
        </el-row>

        <el-row>
        <el-col :span="24">
          <el-table :data="stockProds" ref="prodInfos" border style="width: 100%" @selection-change="selectProd">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="prodCode" label="装备编号" width="120"></el-table-column>
            <el-table-column prop="prodName" label="装备名称" width="120"></el-table-column>
            <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格" width="80"></el-table-column>
            <el-table-column prop="prodStocknum" label="库存数"  width="80"></el-table-column>
            <el-table-column prop="prodResiduenum" label="可出库数"  width="80"></el-table-column>
            <el-table-column prop="emit" label="单位" width="60"></el-table-column>
            <el-table-column prop="areaName" label="库区"></el-table-column>
            <el-table-column prop="departmentCode" label="库位"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">取 消</el-button>
          <el-button size="small" type="primary" :loading="submitLoading" @click="selectprodSuccess()">确 定</el-button>
        </div>
    </el-dialog>

    <selectnum :carId="carId" :selectnumDialog.sync="selectnumDialog"></selectnum>
  </div>
</template>

<script>
import { GetProduct, SelectByProdInfo } from '@/api/prod';
import { GetStockInfo, GetStockInfoPage, SearchStockInfo } from '@/api/outstore';
import { getStore } from '@/utils/app.js';
import { FindStoreArea, FindAreaDepart} from '@/api/store.js'
import selectnum from '@/views/carmanage/selectnum';
export default {
  name: 'stockprod',
  props: ['selectprodDialog', 'carSelectprod', 'carId'],
  components: {
    selectnum
  },
  data() {
    return {
      selectnumDialog: false, // 打开车辆选择装备时弹框
      selectprodVis: false,
      submitLoading: false,
      formLabelWidth: '90px',
      categoryvalue: '',
      prod_code: '',
      prod_name: '',
      select_area: '',
      select_depart: '',
      areaList: [],
      departlist: [],
      selectedProd: [],
      stockProds: [],
       // 分页
        pageNum: 1,
        pageSize: 5,
        total_num: null,
        isSearch: false,
    }
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
  },
  mounted() {
    this.getStockProd();
    this.getStoreArea();
    this.$store.commit('ware/SET_SELECTPROD', []);
  },
  methods: {
    // 根据仓库id获取所有库存信息
    getStockProd() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetStockInfoPage(reqData).then( res => {
        let data = res.data.info;
        this.stockProds = data.list;
        this.total_num = data.total;
      }).catch( error => console.log(error))
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.isSearch) {
        this.searchProd()
      } else {
        this.getStockProd()
      }
      
    },
    // 获取页面仓库和库区
    getStoreArea() {
      FindStoreArea(this.storeid).then( res => {
          this.areaList = res.data;
      })
    },
    resetForm() {
      this.prod_code = ''
      this.prod_name = ''
      this.select_area = ''
      this.select_depart = ''
    },
    // 搜索库存装备
    searchProd() {
      let reqData = {
        pageNum: 1,
        pageSize: 5,
        prodName: this.prod_name,
        prodCode: this.prod_code,
        prodArea: this.select_area,
        prodDepart: this.select_depart
      }
      SearchStockInfo(reqData).then( res => {
        let data = res.data.info;
        this.stockProds = data.list;
        this.total_num = data.total;
        this.isSearch = true
      }).catch( error => console.log(error))
    },
    // 选择库区显示库位
    choseArea(val) {
      // 根据库区id加载库位数据
      FindAreaDepart(val).then( res => {
        this.departlist = res.data;
      })
    },
    close() {
      this.selectprodVis = false;
      this.$emit("update:selectprodDialog", false);
      this.resetForm();
      this.$store.commit('ware/SET_SELECTPROD', []);
    },
    // 选择商品
    selectProd(val) {
      this.selectedProd = val;
    },
    selectprodSuccess() {
      this.$store.commit('ware/SET_SELECTPROD', this.selectedProd);
     
      if(this.carSelectprod) {
        // 车辆选择装备
        this.selectnumDialog = true;
        this.$refs.prodInfos.clearSelection()
      } else {
         this.selectprodVis = false;
         this.resetForm();
        this.$emit("update:selectprodDialog", false);
        this.$refs.prodInfos.clearSelection()
      }
    },
  },
  watch: {
    selectprodDialog(newVal,oldVal) {  
      this.selectprodVis = newVal;
    },
    selectnumDialog(newVal) {
      if (!newVal) {
        this.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>